<template>
	<div class="query">
		<div class="tab clear">
			<div class="tab_btn fl" :class="{'active':tabFlag == 'mz'}" @click="tab('mz')">门诊</div>
			<div class="tab_btn fl" :class="{'active':tabFlag == 'zy'}" @click="tab('zy')">住院</div>
		</div>
		
		<div class="check">
			<div class="c_left">条件搜索栏</div>
			<div class="c_right">
				<div class="clear">
					<div class="fl">
						<span class="c_tip">查询方式</span>
						 <el-radio-group v-model="radio">
						    <el-radio :label="1">年报</el-radio>
						    <el-radio :label="2">季报</el-radio>
						    <el-radio :label="3">月报</el-radio>
							<el-radio :label="4">日报</el-radio>
						  </el-radio-group>
					</div>
					<div class="clear"></div>
					<div class="fl" v-if="radio != 4">
						<span class="c_tip">年</span>
						 <el-select v-model="year" placeholder="请选择">
						    <el-option
						      v-for="item in yearOp"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
					</div>
					<div class="fl" v-if="radio == 2">
						<span class="c_tip">季度</span>
						 <el-select v-model="quarter" placeholder="请选择">
						    <el-option
						      v-for="item in quarterOp"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
					</div>
					<div class="fl" v-if="radio == 3">
						<span class="c_tip">月</span>
						 <el-select v-model="month" placeholder="请选择">
						    <el-option
						      v-for="item in monthOp"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
					</div>
					<div class="fl" v-if="radio == 4">
						<span class="c_tip">开始时间</span>
						<el-date-picker
							v-model="starttime"
							type="date"
							placeholder="选择日期"
							class="c_select">
						</el-date-picker>
					</div>
					<div class="fl" v-if="radio == 4">
						<span class="c_tip">结束时间</span>
						<el-date-picker
							v-model="endtime"
							type="date"
							placeholder="选择日期"
							class="c_select">
						</el-date-picker>
					</div>
					<div class="fl" style="margin-left:65px;">
						<el-button type="danger" class="btn_clear" @click="searchFun">搜索</el-button>
						<el-button type="primary" class="btn_clear" @click="exportFun">导出XLS</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="list_tip clear">
			<!-- <span class="fl">数据管理列表</span> -->
		</div>
		<div class="table_box">
			<template>
			  <el-table
			    :data="tableData"
			    style="width: 100%"
				:header-cell-style="tableHead"
				:cell-style="tableBody">
			    <el-table-column
				type="index"
			      label="序号">
			    </el-table-column>
			    <el-table-column label="药师直接通过">
			      <el-table-column
			        prop="pharPass"
			        label="数">
			      </el-table-column>
				  <el-table-column
				    prop="pharPassLv"
				    label="率(%)">
				  </el-table-column>
			    </el-table-column>
				<el-table-column label="医生修改通过">
				  <el-table-column
				    prop="docXiuGai"
				    label="数">
				  </el-table-column>
				  <el-table-column
				    prop="docXiuGaiLv"
				    label="率(%)">
				  </el-table-column>
				</el-table-column>
				<el-table-column label="医生双签通过">
				  <el-table-column
				    prop="docShuangQian"
				    label="数">
				  </el-table-column>
				  <el-table-column
				    prop="docShuangQianLv"
				    label="率(%)">
				  </el-table-column>
				</el-table-column>
				<el-table-column label="系统预判通过">
				  <el-table-column
				    prop="sysPass"
				    label="数">
				  </el-table-column>
				  <el-table-column
				    prop="sysPassLv"
				    label="率(%)">
				  </el-table-column>
				</el-table-column>
				<el-table-column label="自动干预通过">
				  <el-table-column
				    prop="sysGy"
				    label="数">
				  </el-table-column>
				  <el-table-column
				    prop="sysGyLv"
				    label="率(%)">
				  </el-table-column>
				</el-table-column>
				<el-table-column label="超时通过">
				  <el-table-column
				    prop="outTime"
				    label="数">
				  </el-table-column>
				  <el-table-column
				    prop="outTimeLv"
				    label="率(%)">
				  </el-table-column>
				</el-table-column>
				<el-table-column label="自动通过药师离线">
				  <el-table-column
				    prop="phrLeave"
				    label="数">
				  </el-table-column>
				  <el-table-column
				    prop="phrLeaveLv"
				    label="率(%)">
				  </el-table-column>
				</el-table-column>
				<el-table-column label="自动通过干预功能关闭">
				  <el-table-column
				    prop="sysGyClose"
				    label="数">
				  </el-table-column>
				  <el-table-column
				    prop="sysGyCloseLv"
				    label="率(%)">
				  </el-table-column>
				</el-table-column>
				<el-table-column label="自动通过非药师监测范围">
				  <el-table-column
				    prop="phrNoJianCe"
				    label="数">
				  </el-table-column>
				  <el-table-column
				    prop="phrNoJianCeLv"
				    label="率(%)">
				  </el-table-column>
				</el-table-column>
				<el-table-column label="合计">
				  <el-table-column
				    prop="all"
				    label="数">
				  </el-table-column>
				  <el-table-column
				    prop="allLv"
				    label="率(%)">
				  </el-table-column>
				</el-table-column>
			  </el-table>
			</template>
			<pagination :total="query.total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getList" />
		</div>
	</div>
</template>

<script>
	import Bluetable from "../../../components/Bluetable/index"
	import {ptc} from "@/api/systemport.js";
	export default {
		components:{Bluetable},
		data () {
			return {
				todayType:"mz",
				tabFlag:'mz',
				tableData: [],
				query:{
					total:0,
					page:1,
					limit:10
				},
				yearOp:[
					{
						value: 2019,
						label:2019
					},	
					{
						value: 2020,
						label:2020
					},
					{
						value: 2021,
						label:2021
					},
					{
						value: 2022,
						label:2022
					},
					{
						value: 2023,
						label:2023
					},
					{
						value: 2024,
						label:2024
					},
					{
						value: 2025,
						label:2025
					},
					{
						value: 2026,
						label:2026
					},
					{
						value: 2027,
						label:2027
					},
					{
						value: 2028,
						label:2028
					}
				],
				quarterOp:[
					{
						value: 1,
						label:1
					},
					{
						value: 2,
						label:2
					},
					{
						value: 3,
						label:3
					},
					{
						value: 4,
						label:4
					}
				],
				monthOp:[
					{
						value: 1,
						label:1
					},
					{
						value: 2,
						label:2
					},
					{
						value: 3,
						label:3
					},
					{
						value: 4,
						label:4
					},
					{
						value: 5,
						label:5
					},
					{
						value: 6,
						label:6
					},
					{
						value: 7,
						label:7
					},
					{
						value: 8,
						label:8
					},
					{
						value: 9,
						label:9
					},
					{
						value: 10,
						label:10
					},
					{
						value: 11,
						label:11
					},
					{
						value: 12,
						label:12
					}
				],
				year:"",
				quarter:"",
				month:"",
				starttime:"", 
				endtime:"",
				style:"height: 60px;padding-top: 10px;",
				radio: 1
			}
		},
		methods:{
			tab(val){
				this.tabFlag = val;
				this.todayType = val;
			},
			async getList(){
				let res=await this.$ptc.passJson({
					type:this.tabFlag,
					year:this.year,
					quarter:this.quarter,
					month: this.month,
					selectType: this.radio,
					starttime:this.starttime, 
					endtime: this.endtime
				})
				if(res.total>0){
					this.query.total=res.total;
					this.tableData=res.rows;
				}
			},
			searchFun(){
				this.query={
					page:1,
					limit:10,
					total:0
				}
				this.getList();
			},
			async exportFun(){
				/* let res=await this.$ptc.passDownloadExcel({
					type:this.todayType,
					HttpServletResponse:1,
				});
				console.log(res); */
				let href=process.env.VUE_APP_BASE_API+":"+ptc+"/core/phar/phrReport/pass-download-excel?type="+this.todayType+"&HttpServletResponse=1";
				window.open(href, "_blank");
			},
			tableHead ({row,rowIdx}) {
				return "background:#409efe;color:#fff;font-size:12px;height:36px;padding:0;line-height:36px;text-align:center;border:0;"
			},
			tableBody({row, column, rowIndex, columnIndex}){
				var style = "padding:0;font-size:12px;color:#8b8b8b;text-align:center;border:0;border-right:1px solid #d9f1f3;"
				if(rowIndex%2 != 0){
					if(columnIndex == 12){
						style += "border:0;"
					}
					style += "height:36px;line-height:36px;background:#eaf4fe;"
					
				}
				if(rowIndex%2 == 0){
					if(columnIndex == 12){
						style += "border:0;"
					}
					style += "height:44px;line-height:44px;background:#fff;"
				}
				return style;
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	body{
		background:#e6edf5;
	}
	.query{
		width:100%;
		height:100%;
		background:#e6edf5;
		.tab{
			height:50px;
			line-height:50px;
			padding:0 20px;
			border-bottom:2px solid #e3ecf5;
			font-size:16px;
			color:#333;
			text-align:center;
			background:#fff;
			.tab_btn{
				width:100px;
				height:100%;
				cursor:pointer;
			}
			.tab_btn.active{
				color:#409eff;
				border-bottom:2px solid #409eff;
				height:50px;
			}
		}
		.check{
			font-size:12px;
			display:flex;
			line-height:60px;
			background:#fff;
			text-align:center;
			.c_left{
				width:115px;
				float:left;
			}
			.c_right{
				overflow:hidden;
				color:#636365;
				border-left:1px solid #e6edf5;
				.c_tip{
					display:inline-block;
					width:100px;
					padding-right:10px;
					text-align:right;
				}
				.c_input{
					width:150px;
					height:40px;
					border:1px solid #dcdfe6;
					border-radius:4px;
					padding-left:5px;
				}
				.c_input::-webkit-input-placeholder {
					color: #dcdfe6;
				}
				.c_input::-ms-input-placeholder {
					color: #dcdfe6;
				}
				.c_input::-moz-input-placeholder {
					color: #dcdfe6;
				}
				.c_search{
					width:100px;
				}
				.c_searchbtn{
					display:inline-block;
					width:42px;
					height:25px;
					margin-left:4px;
					background:#28a4f4;
					color:#fff;
					font-size:12px;
					text-align:center;
					line-height:26px;
					border-radius:6px;
					cursor:pointer;
				}
				.c_checkbox{
					width:230px;
					height:40px;
					display:inline-block;
					margin-left:-12px;
				}
				.btn_clear{
					padding:0;
					width:70px;
					height:40px;
					line-height:40px;
				}
			}
		}
		.list_tip{
			font-size:14px;
			color:#29a4f2;
			padding:10px 18px;
		}
		.table_box{
			padding:0 18px;
		}
	}
	.el-checkbox__label{
		padding-left:5px;
	}
	.el-checkbox{
		margin-right:10px;
	}
</style>
